<template>
    <view class="content">
        <u-navbar :is-back="true" back-icon-color="#fff" :title="data.name" :background="background" :border-bottom="false" 
            title-color="#fff" title-size="30" >
            <view slot="right" style="padding-right: 20rpx;font-size: 28rpx; color: #fff;" v-if="share == 0 && data.user_phone" @click="openShare">
                分享
            </view>
        </u-navbar>
        <!-- 轮播 -->
        <view class="top-box">
            <view class="top-nav">
                <view class="top-item" :class="{activeSwiper : navType == 1}" @click="chooseSwiper(1)">图片</view>
                <view class="top-item" :class="{activeSwiper : navType == 2}" @click="chooseSwiper(2)" v-if="data && data.imgs && data.imgs.length > 0">样板间</view>
                <view class="top-item" :class="{activeSwiper : navType == 3}" @click="chooseSwiper(3)" v-if="data && data.video">视频</view>
            </view>
            <view v-if="navType == 1">
                <u-swiper :list="data.images" height="557" interval="3000" duration="500" border-radius="0" indicator-pos="bottomRight" mode="number" @click="doPreview($event, data.images)"></u-swiper>
            </view>
            <view v-if="navType == 2">
                <u-swiper :list="data.imgs" height="557" interval="3000" duration="500" border-radius="0" indicator-pos="bottomRight" mode="number" @click="doPreview($event, data.imgs)"></u-swiper>
            </view>
            <view v-if="navType == 3">
                <view class="v-swiper" @click="openVideoMask">
                    <u-icon name="play-circle-fill" color="#3199f5" size="150" ></u-icon>
                </view>
            </view>
        </view>
        
        <view class="wrapper">
            <view class="t-name">{{data.name}}</view>
            <!-- 标签 -->
            <view class="label">
                <view class="label-text label-first" v-if="data.sale">{{data.sale}}</view>
                <view class="label-text" v-if="data.project">{{data.project}}</view>
                <view class="label-text" v-for="(item,index) in data.labels" :key="index">{{item}}</view>
            </view>
            
            <view class="price" v-if="data.unit_price">
                单价 <text class="price-num">{{data.unit_price}}</text>元/㎡
            </view>
            
            <view class="other">
                <view class="other-n" v-if="data.house_type">
                    <view class="other-n-l">户型</view>
                    <view class="u-flex-1">{{data.house_type}}</view>
                </view>
                <view class="other-n" v-if="data.house_area">
                    <view class="other-n-l">建面</view>
                    <view class="u-flex-1">{{data.house_area}}㎡</view>
                </view>
                <view class="other-n" v-if="data.open_date">
                    <view class="other-n-l">开盘</view>
                    <view class="u-flex-1">{{data.open_date}}</view>
                </view>
                <view class="other-n" v-if="data.delivery_date">
                    <view class="other-n-l">交房</view>
                    <view class="u-flex-1">{{data.delivery_date}}</view>
                </view>
            </view>
            
            <!-- 地图/周边 -->
            <view class="add" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude)">
                <image src="../../static/image/index_11.png" class="index-11"></image>
                <view class="add-box">
                    <view class="add-tit">{{data.name}}</view>
                    <view class="add-text">{{data.address}}</view>
                </view>
            </view>
            
            <view class="more-info" @click="toPage('/pages/index/house-info-details?id=' + id)">更多详细信息</view>
            
            <!-- 佣金方案 -->
            <view class="yj" v-if="share == 0 && info.user_type" @click="toPage('/pages/index/commission?id=' + id)">
                <image src="../../static/image/index_12.png" class="index-12"></image>
                <view class="yj-box">
                    <!-- <view class="yj-text">佣金计算规则：{{data.commission_price}}</view> -->
                    <view class="yj-down">
                        <view class="yj-down-i border-r">
                            <image src="../../static/image/index_09.png" class="index-09"></image>
                            <view>{{data.project}}</view>
                        </view>
                        <view class="yj-down-i">
                            <image src="../../static/image/index_10.png" class="index-09"></image>
                            <view>基础方案</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 合作平台 规则 -->
            <view v-if="share == 0 && info.user_type">
                <image :src="data.platform_image" class="index-13" v-if="data && data.platform_image"></image>
                <template v-if="data.rules">
                    <view class="rule-title">合作规则</view>
                    <view class="rule-box">
                        <view class="rule-text" :class="ruleShow ? 'tip2' : 'tip'">
                            <u-parse :html="data.rules"></u-parse>
                        </view>
                        <view class="more" @click="ruleShow = true" v-if="!ruleShow">
                            <view class="u-p-r-15">展开</view>
                            <u-icon name="arrow-down" size="28"></u-icon>
                        </view>
                        <view class="more" @click="ruleShow = false" v-else>
                            <view class="u-p-r-15">收起</view>
                            <u-icon name="arrow-up" size="28"></u-icon>
                        </view>
                    </view>
                </template>
            </view>
            
            <!-- 其他户型 -->
            <view class="house" v-if="(data && data.house_type_merge && data.house_type_merge.length > 0) || (houseTypeList && houseTypeList.length > 0)">
                <view class="house-top">
                    <view>其他户型</view>
                    <!-- <view class="u-flex">
                        <view class="house-more">查看更多</view>
                        <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                    </view> -->
                </view>
                <view class="house-nav">
                    <scroll-view scroll-x>
                        <view class="house-nav-i">
                            <view class="house-nav-i2" :class="{isNav : houseTypeId == item.id}" 
                                v-for="(item, index) in data.house_type_merge" :key="index" @click="change(item)">
                                {{item.type}}（{{item.count}}）
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="house-img">
                    <scroll-view scroll-x>
                        <view class="house-img-i">
                            <view class="house-img-i2" v-for="(item, index) in houseTypeList" :key="index" 
                                @click="toPage('/pages/index/house-details?id=' + item.id)">
                                <image :src="item.image" class="del-11"></image>
                                <view>
                                    {{item.name}}<text class="u-p-l-15">{{item.house_area}}㎡</text>
                                </view>
                                <view class="house-price">
                                    <text class="house-price-num">{{item.price}}</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            
            <!-- 周边配套 -->
            <view class="house u-p-t-40">
                <view class="house-top">
                    <view>周边配套</view>
                    <view class="u-flex" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude)">
                        <view class="house-more">查看更多</view>
                        <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                    </view>
                </view>
                <view class="house-img">
                    <scroll-view scroll-x>
                        <view class="house-img-i">
                            <view class="pt" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude + '&keyword=公交' + '&cateId=1')">
                                <image src="../../static/image/index_14.png" class="index-14"></image>
                                <view>公交</view>
                            </view>
                            <view class="pt" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude + '&keyword=学校' + '&cateId=2')">
                                <image src="../../static/image/index_17.png" class="index-14"></image>
                                <view>学校</view>
                            </view>
                            <view class="pt" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude + '&keyword=休闲' + '&cateId=3')">
                                <image src="../../static/image/index_15.png" class="index-14"></image>
                                <view>休闲</view>
                            </view>
                            <view class="pt" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude + '&keyword=购物' + '&cateId=4')">
                                <image src="../../static/image/index_16.png" class="index-14"></image>
                                <view>购物</view>
                            </view>
                            <view class="pt" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude + '&keyword=医疗' + '&cateId=5')">
                                <image src="../../static/image/index_18.png" class="index-14"></image>
                                <view>医疗</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="map" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude)">
                    <view class="u-flex">
                        <image src="../../static/image/index_19.png" class="index-19"></image>
                        <view>前往地图查看</view>
                    </view>
                    <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                </view>
            </view>
            
            <!-- 楼盘推荐  display=1不显示 -->
            <view class="sell" v-if="data.display != 1 && share == 0">
                <view class="sell-nav">
                    <view :class="{active : type == 1}" @click="chooseNav(1)">周边楼盘推荐</view>
                    <view :class="{active : type == 2}" @click="chooseNav(2)">相似楼盘推荐</view>
                </view>
                <view class="item" v-for="(item, index) in list" :key="index" @click="$gTo('/pages/index/floor-details?id=' + item.id)">
                    <image :src="item.image" class="del-09"></image>
                    <view>
                        <view class="u-flex u-row-between u-col-center">
                            <view>
                                <view class="name">{{item.name}}</view>
                                <view class="area">{{item.region_name}} · {{item.unit_price}}元/m²</view>
                            </view>
                            <!-- <view class="baobei">报备</view> -->
                        </view>
                        <view class="sell-price">
                            <view>
                                <text class="p-l">{{item.commission_price}}</text>
                                <!-- <text class="p-l-r">万元</text> -->
                                <text>/套佣金</text>
                            </view>
                            <view class="plan">{{item.commission_num}}个方案</view>
                        </view>
                    </view>
                </view>
                <view class="none" v-if="list.length == 0">暂无相关信息</view>
            </view>
        </view>
        
        <!-- 底部 -->
        <view class="footer" v-if="share == 0">
            <view class="footer-l" @click="toChat(1)">
                <image src="../../static/icon/news.png" class="news"></image>
                <view>微聊驻场</view>
            </view>
            <view class="footer-l" @click="toChat(2)">
                <image src="../../static/icon/tel_01.png" class="news"></image>
                <view>致电驻场</view>
            </view>
            <view class="footer-r" v-if="role == 3 || role == 4 || role == 7" @click.stop="$gTo('/staff/pages/resident/edit-floor?id='+ id)">
                <image src="../../static/icon/write.png" class="write"></image>
                <view>修改详情</view>
            </view>
            <view class="footer-r" v-else @click.stop="toReport">
                <image src="../../static/icon/write.png" class="write"></image>
                <view>报备客户</view>
            </view>
        </view>
        
        <!-- 已分享 -->
        <view class="footer u-flex u-row-between u-col-center" v-if="share == 1">
            <view class="footer-l-s">
                <!-- <image src="../../static/icon/avatar_02.png" class="avatar-02"></image>
                <view>
                    <view class="f-s-n">分享人名称</view>
                    <view class="f-s-c">机构名称</view>
                </view> -->
            </view>
            <view class="footer-r-s" @click="$call(phone)">
                <image src="../../static/icon/tel_02.png" class="tel-02"></image>
                <view>电话咨询</view>
            </view>
        </view>
        <!-- 视频弹窗 -->
        <u-mask :show="videoShow" mode="center" border-radius="14" @click="closeVideoShow">
            <view class="popup">
                <view class="win-box2">
                    <view style="width: 300px;height: 225px;">
                        <video id="myVideo" v-if="vShow" :src="data.video" :autoplay="autoplay" controls
                            play-btn-position="center" style="width: 300px;height: 225px;"></video>
                    </view>
                    <view class="pop-btn">
                        <view @click.stop="downloadVideo">
                            <u-icon name="download" color="#fff" size="80"></u-icon>
                        </view>
                        <image src="/static/icon/wx.png" class="pop-del" @click.stop="closeVideoShow"></image>
                    </view>
                </view>
            </view>
        </u-mask>
        <!-- 分享弹窗 -->
        <u-popup v-model="show" mode="bottom" border-radius="20" height="350rpx">
            <view class="pop-box">
                <view class="pop-top">
                    <view @click="toShare(1)">
                        <image src="../../static/icon/weixin.png" class="pop-icon"></image>
                        <view>分享好友</view>
                    </view>
                    <view @click="toShare(2)">
                        <image src="../../static/icon/pyq.png" class="pop-icon"></image>
                        <view>分享朋友圈</view>
                    </view>
                    <view @click="toShare(3)">
                        <image src="../../static/icon/hb.png" class="hb-icon"></image>
                        <view class="u-p-t-15">生成海报</view>
                    </view>
                </view>
                <view class="pop-close" @click="show = false">关闭</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(49,153,245,1)' },
                type: 1,
                show: false,
                id: '',
                data: {},
                houseTypeList: [],//其他户型
                houseTypeId: '',
                list: [],//周边/相似
                keyword: '',
                role: '',
                share: 0,
                shareData: {},
                info: {},
                
                navType: 1,//1图片 2样板间 3视频
                videoplay: '',
                autoplay: false,
                videoShow:false,
                vShow: false,
                ruleShow: false,
				phone: '',
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            // 3项目驻场 4项目总监 7管理员 进入
            if (option.role) {
                this.role = option.role
            }
            // 判断是通过分享进入的
            if (option.share) {
                this.share = 1
            }
			if (option.phone) {
			    this.phone = option.phone
			}
            this.id = option.id
            this.getData()
            if (this.$getSync('userToken')) {
                this.getInfo()
            }
        },
        onShareAppMessage(res) {
        	let _this = this;
        	return {
                title: this.data.name,
                imageUrl: this.data.image,
                path: '/pages/index/floor-details?id=' + _this.id + '&share=1' + '&phone=' + _this.data.user_phone
        	}
        },
        onReady() {
        	this.videoplay = uni.createVideoContext('myVideo')
            this.videoplay.play()
        },
        methods: {
            // 下载视频
            downloadVideo() {
                uni.showLoading({title:'下载中...'})
                uni.downloadFile({
                    url: this.video,
                	success: (res) => {
                        console.log(res)
                		if (res.statusCode === 200) {
                            var tempFilePaths = res.tempFilePath;
                            uni.saveImageToPhotosAlbum({
                                filePath: tempFilePaths,
                                success: () => {
                                    uni.hideLoading({})
                                    this.$toast('下载成功');
                                }
                            });
                		}
                	}
                });
            },
            // 关闭视频
            closeVideoShow() {
                console.log(77777)
                this.autoplay = false
                this.vShow = false
                this.videoShow = false
                this.videoplay = uni.createVideoContext('myVideo')
                this.videoplay.stop()
            },
            // 打开视频
            openVideoMask() {
                console.log(66666)
                this.videoShow = true
                this.vShow = true
                this.autoplay = true
            },
            //切换到图片时，视频停止播放
            changeVideo(e) {
                this.videoplay = uni.createVideoContext('myVideo')
            	this.videoplay.stop()
            },
            
            // 选择轮播图类型
            chooseSwiper(num) {
                if (this.navType == num) return
                this.navType = num
                
            },
            // 预览、下载 轮播图片
            doPreview(e, urls) {
                console.log(e, urls)
            	var arr = [];
                urls.forEach(cur => {
                    arr.push(cur.image)
                })
            	uni.previewImage({
            	    urls: arr,
                    current: e,
            	    longPressActions: {
                        itemList: ['保存图片'],
            	        success: (data) => {
                            console.log('data',data)
                            //data.tapIndex按钮下标 ，data.index图片下标
                            uni.downloadFile({
                                url: arr[data.index],
                            	success: (res) => {
                            		if (res.statusCode === 200) {
                                        var tempFilePaths = res.tempFilePath;
                                        uni.saveImageToPhotosAlbum({
                                            filePath: tempFilePaths,
                                            success: () => {
                                                this.$toast('下载成功');
                                            }
                                        });
                            		}
                            	}
                            });
            	        },
            	        fail: (err) => {
                            console.log(err)
            	        }
            	    }
            	});
            },
            
            // 获取个人信息
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.info = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 分享
            openShare() {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/login')
                } else {
                    // 0未认证 1待审核 2通过 3驳回
                    if (this.info && this.info.status == 0) {
                        uni.showModal({
                        	title: '温馨提示',
                        	content: '当前账号未认证，立即认证？',
                        	success: (res) => {
                        		if (res.confirm) {
                        			this.$gTo('/pages/login/real-name')
                        		} else if (res.cancel) {
                        			
                        		}
                        	}
                        });
                    } else if (this.info && this.info.status == 3) {
                        this.$gTo('/pages/login/fail?content=' + this.info.reason)
                    } else if (this.info && this.info.status == 1) {
                        this.$toast('账号审核中...');
                        return
                    } else {
                        this.show = true
                    }
                }
            },
            toShare(num) {
                this.show = false
                if (num == 3) {
                    this.$gTo('/pages/index/poster-list?id='+ this.id)
                } else {
                    uni.setClipboardData({
                        data: this.data.data,
                        success: function() {
                            // console.log('success');
                            uni.showToast({
                                title: '文案已复制',
                                duration: 2000
                            });
                        }
                    });
                    // 1好友 2朋友圈
                    let type = ''
                    if (num == 1) type = 'WXSceneSession'
                    if (num == 2) type = 'WXSceneTimeline'
                    uni.share({
                    	provider: "weixin",
                    	scene: `${type}`,
                    	type: 0,
						href: `https://app.qyjifangtong.com/header/h5/#/pages/index/floor-details?id=${this.id}&share=${1}`,
                    	
                        // href: "https://app.qyjifangtong.com/web/yindaoye/yindaoye.html",
                        // href: "https://app.qyjifangtong.com/XFTAPP/xftYindao.html?id=" + item.id,
                    	title: this.data.name,
                    	imageUrl: this.data.image,
                    	success: (res) => {
                    		console.log("success:" + JSON.stringify(res));
                            this.isShare()
                    	},
                    	fail: (err) => {
                    		console.log("fail:" + JSON.stringify(err));
                    	}
                    });
                }
            },
            
            isShare() {
                this.$ajax('user_share', {
                    user_token: this.$getSync('userToken'),
                    type: 2,//1公告 2楼盘
                    id: this.id,//分享id
                }).then(ret => {
                    if (ret.success == 1000) {
                        
                    } else {
                        
                    }
                });
            },
            
            // 微聊
            toChat(num) {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/login')
                } else {
                    // 0未认证 1待审核 2通过 3驳回
                    if (this.info && this.info.status == 0) {
                        uni.showModal({
                        	title: '温馨提示',
                        	content: '当前账号未认证，立即认证？',
                        	success: (res) => {
                        		if (res.confirm) {
                        			this.$gTo('/pages/login/real-name')
                        		} else if (res.cancel) {
                        			
                        		}
                        	}
                        });
                    } else if (this.info && this.info.status == 3) {
                        this.$gTo('/pages/login/fail?content=' + this.info.reason)
                    } else if (this.info && this.info.status == 1) {
                        this.$toast('账号审核中...');
                        return
                    } else {
                        if (num == 1) {
                            if (this.data.user_id > 0) {
                                var obj = {
                                    id: this.data.user_id,
                                    user_name: this.data.user_name
                                }
                                this.$gTo('/pages/chat/chat-details?data=' + JSON.stringify(obj))
                            } else {
                                this.$toast('无法微聊...');
                            }
                        } else if (num == 2) {
                            if (this.data.phone) {
                                this.$call(this.data.phone)
                            } else {
                                this.$toast('暂无驻场电话...');
                            }
                        }
                    }
                }
            },
            
            // 报备
            toReport() {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/login')
                } else {
                    // 0未认证 1待审核 2通过 3驳回
                    if (this.info && this.info.status == 0) {
                        uni.showModal({
                        	title: '温馨提示',
                        	content: '当前账号未认证，立即认证？',
                        	success: (res) => {
                        		if (res.confirm) {
                        			this.$gTo('/pages/login/real-name')
                        		} else if (res.cancel) {
                        			
                        		}
                        	}
                        });
                    } else if (this.info && this.info.status == 3) {
                        this.$gTo('/pages/login/fail?content=' + this.info.reason)
                    } else if (this.info && this.info.status == 1) {
                        this.$toast('账号审核中...');
                        return
                    } else {
                        var obj = {
                            id: this.id,
                            id_status: this.data.id_status,
                            name: this.data.name,
                        }
                        this.$gTo('/pages/index/report?nitem=' + JSON.stringify(obj))
                    }
                }
            },
            
            toPage(url) {
				if (!this.share) {
					if (!this.$getSync('userToken')) {
					    this.$gTo('/pages/login/login')
					} else {
					    this.$gTo(url)
					}
				} else {
					this.$gTo(url)
				}
            },
        
            // 切换推荐楼盘
            chooseNav(num) {
                this.type = num
                if (num == 1) this.list = this.data.periphery
                if (num == 2) this.list = this.data.be_similar
            },
            
            // 切换其他户型
            change(item) {
                this.houseTypeList = item.house_type
                this.houseTypeId = item.id
            },
            
            // 获取楼盘详情
            getData() {
                this.$ajax('properties_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        if (ret.detail && ret.detail.house_type_merge && ret.detail.house_type_merge.length > 0) {
                            this.houseTypeList = ret.detail.house_type_merge[0].house_type
                            this.houseTypeId = ret.detail.house_type_merge[0].id
                        }
                        this.list = ret.detail && ret.detail.periphery
                        // let latitude = Number(this.data.latitude).toFixed(4)
                        // let longitude = Number(this.data.longitude).toFixed(4)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
                this.background.backgroundColor = 'rgba(49,153,245,1)';
            	// if (e.scrollTop == 0) {
            	// 	this.background.backgroundColor = 'rgba(49,153,245,1)';
            	// } else {
             //        this.background.backgroundColor = 'rgba(49,153,245,1)';
            	// 	// this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
            	// }
            },
        }
    };
</script>

<style lang="scss">
    .rule-title{
        font-size: 36rpx;
        font-weight: bold;
    }
    .rule-box{
        font-size: 24rpx;
        color: #000;
        padding: 20rpx 0;
    }
    .tip {
    	font-size: 26rpx;
    	line-height: 50rpx;
    	height: 100rpx;
    	display: -webkit-box;
    	overflow: hidden;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
    .tip2 {
    	font-size: 26rpx;
    	line-height: 50rpx;
    }
    .more{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20rpx;
    }
    
    .top-box{
        position: relative;
    }
    .top-nav{
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, .7);
        padding: 10rpx 15rpx;
        border-radius: 7rpx;
    }
    .top-item{
        font-size: 24rpx;
        color: #000;
        padding: 10rpx 23rpx;
    }
    .activeSwiper{
        color: #fff;
        background-color: rgba(49,153,245, .7);
        border-radius: 7rpx;
    }
    .v-swiper{
        width: 750rpx;
        height: 557rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 750upx;
        height: 557rpx;
        border-radius: 20upx;
        position: relative;
        border-radius: 10rpx;
        padding: 0 75rpx;
    }
    .pop-btn{
        position: absolute;
        bottom: -100upx;
        left: 33vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pop-del {
        width: 10vw;
        height: 10vw;
        margin-left: 115rpx;
    }
    
    
    
    
    .none{
    	text-align: center;
    	padding: 30upx 0;
    	box-sizing: border-box;
    	color: #999;
    	font-size: 24upx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding-bottom: 100px;
    }
    .wrapper{
        background-color: #fff;
        padding: 40rpx 30rpx 10rpx;
        font-size: 28rpx;
    }
    .t-name{
        font-size: 40rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .label{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }
    .label-text{
        font-size: 22rpx;
        line-height: 1;
        padding: 10rpx 15rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        background-color: #f6f6f6;
    }
    .label-first{
        color: #ef4034;
        background-color: #fff0ef;
    }
    .price{
        padding: 15rpx 0 25rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
        color: #ef4034;
        padding: 0 7rpx 0 20rpx;
    }
    .other{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .other-n{
        width: calc(690rpx / 2);
        padding-bottom: 25rpx;
        padding-right: 5rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .other-n-l{
        color: #747272;
        padding-right: 20rpx;
    }
    
    .add{
        padding-bottom: 25rpx;
        position: relative;
    }
    .index-11{
        width: 686rpx;
        height: 127rpx;
    }
    .add-box{
        width: 510rpx;
        position: absolute;
        top: 25rpx;
        left: 25rpx;
    }
    .add-tit{
        font-size: 30rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .add-text{
        font-size: 25rpx;
        color: #747272;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .more-info{
        color: #00a1e9;
        margin-bottom: 25rpx;
        padding: 25rpx;
        background-color: #effaff;
        border-radius: 10rpx;
        text-align: center;
    }
    
    .yj{
        position: relative;
    }
    .index-12{
        width: 686rpx;
        height: 288rpx;
    }
    .yj-box{
        position: absolute;
        left: 7rpx;
        bottom: 9rpx;
        width: 672rpx;
    }
    .yj-text{
        font-size: 24rpx;
        color: #188493;
        padding-bottom: 20rpx;
        padding-left: 23rpx;
    }
    .yj-down{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .yj-down-i{
        width: calc(672rpx / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    .border-r{
        border-right: 2rpx solid #c4d3d5;
    }
    .index-09{
        width: 73rpx;
        height: 73rpx;
        margin-right: 20rpx;
    }
    
    .index-13{
        width: 686rpx;
        height: 140rpx;
        margin: 25rpx 0;
    }
    
    .house{
        padding-top: 15rpx;
    }
    .house-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .house-more{
        font-size: 26rpx;
        font-weight: normal;
        color: #616161;
        padding-right: 10rpx;
    }
    .arrow-r-01{
        width: 8rpx;
        height: 15rpx;
    }
    .house-nav{
        width: 690rpx;
        white-space: nowrap;
        padding-bottom: 20rpx;
    }
    .house-nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .house-nav-i2{
        background-color: #f6f6f6;
        font-size: 25rpx;
        line-height: 1;
        color: #424242;
        border-radius: 50rpx;
        margin-right: 20rpx;
        padding: 13rpx 15rpx;
    }
    .isNav{
        color: #fff;
        background-color: #00a1e9;
    }
    .house-img{
        width: 690rpx;
        white-space: nowrap;
    }
    .house-img-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .house-img-i2{
        width: 330rpx;
        margin-right: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
    }
    .del-11{
        width: 330rpx;
        height: 234rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
    }
    .house-price{
        font-size: 24rpx;
        font-weight: normal;
        color: #fe3c3c;
        padding-top: 7rpx;
    }
    .house-price-num{
        font-size: 36rpx;
        font-weight: bold;
    }
    
    .pt{
        padding: 15rpx 30rpx;
        border-radius: 20rpx;
        background-color: #f6f6f6;
        margin-right: 25rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        line-height: 1;
        color: #212d45;
    }
    .index-14{
        width: 53rpx;
        height: 53rpx;
        margin-bottom: 5rpx;
    }
    
    .map{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 17rpx 30rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 15rpx;
        margin: 20rpx 0 30rpx;
    }
    .index-19{
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
    }
    
    .sell{
        padding-top: 15rpx;
    }
    .sell-nav{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 50rpx;
        font-size: 32rpx;
        color: #808080;
    }
    .sell-nav>view{
        position: relative;
        padding-right: 50rpx;
    }
    .active{
        font-size: 36rpx;
        font-weight: bold;
        color: #000;
    }
    .active::after{
        display: block;
        content: '';
        width: 50rpx;
        height: 10rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        position: absolute;
        bottom: -20rpx;
        left: 82rpx;
        // transform: translateX(-50%);
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 445rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 445rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    // .baobei{
    //     padding: 15rpx 30rpx;
    //     font-size: 27rpx;
    //     color: #803906;
    //     background-color: #ffecd2;
    //     border-radius: 15rpx;
    // }
    .sell-price{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
        margin-left: 12rpx;
    }
    
    
    .footer{
        width: 100vw;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10rpx 20rpx;
    }
    .footer-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 23rpx;
        color: #696969;
    }
    .news{
        width: 35rpx;
        height: 35rpx;
        margin-bottom: 5rpx;
    }
    .footer-r{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 80rpx;
        background-color: #00a1e9;
        border-radius: 10rpx;
        color: #fff;
    }
    .write{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    
    .footer-l-s{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .avatar-02{
        width: 49rpx;
        height: 49rpx;
        border-radius: 50%;
        margin-right: 10rpx;
    }
    .f-s-n{
        width: 330rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        font-weight: bold;
    }
    .f-s-c{
        width: 330rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 22rpx;
        color: #696969;
    }
    .footer-r-s{
		flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 50rpx;
        background-color: #3dc489;
        border-radius: 10rpx;
        color: #fff;
    }
    .tel-02{
        width: 30rpx;
        height: 30rpx;
        margin-right: 20rpx;
    }
    
    // 分享弹窗
    .pop-box{
        background-color: #f5f5f5;
        width: 100vw;
    }
    .pop-top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 50rpx 0 35rpx;
    }
    .pop-top>view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #424d5a;
    }
    // .pop-top>view:first-child{
    //     padding-right: 130rpx;
    // }
    .pop-icon{
        width: 104rpx;
        height: 104rpx;
        margin-bottom: 15rpx;
    }
    .hb-icon{
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 15rpx;
    }
    .pop-close{
        font-size: 28rpx;
        color: #424d5a;
        padding: 30rpx 0;
        border-top: 2rpx solid #e6e6e6;
        text-align: center;
    }
    
</style>
